<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <!--侧边栏-->
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible width="200">
      <div class="logo" style="text-align: center">
        <h1 class="v-logo">
          <a-icon type="crown" style="color: #fff;margin-right:7px"/>
          <span v-if="!collapsed">教务管理系统</span>
        </h1>
      </div>

      <a-menu theme="dark" mode="inline" v-model="currentPage">
        <a-menu-item key="1">
          <router-link to="/student/courseSearch">
            <a-icon type="database" theme="filled"/>
            <span>课表查询</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/student/courseSelect">
            <a-icon type="safety-certificate" theme="filled"/>
            <span>选课</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/student/scoreQuery">
            <a-icon type="snippets" theme="filled"/>
            <span>计划与成绩</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!--顶部横栏-->
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        />
        <div class="admin">
          <a-icon type="fire" theme="filled" style="color:#FF3333"/>
          <a-dropdown>
            <span style="margin-left: 10px;margin-right:70px; cursor: pointer">
              {{ userInfo.username }} <a-icon type="down"/>
            </span>
            <a-menu slot="overlay">
              <a-menu-item>
                <span @click="infoModelShow=true;">我的信息</span>
              </a-menu-item>
              <a-menu-item>
                <span @click="reminderShow=true">我的提醒</span>
              </a-menu-item>
              <a-menu-item>
                <span @click="passwordModelShow=true">修改密码</span>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-tooltip>
            <template slot="title">
              退出登录
            </template>
            <a-icon type="logout" class="exit" @click="this.$parent.exit"/>
          </a-tooltip>
        </div>
      </a-layout-header>
      <router-view/>
      <div class="footer">
        Copyright &copy; 2020 {{ organization }}
      </div>
    </a-layout>
    <!-- 修改个人信息模态框-->
    <update-info :show="infoModelShow" @close="infoModelShow=false"></update-info>
    <!--    我的上课提醒-->
    <my-reminders :show="reminderShow" @close="reminderShow=false"/>
    <!--    修改密码-->
    <update-password :show="passwordModelShow" @close="passwordModelShow=false"/>
  </a-layout>
</template>
<script>
import app from "../../App";
import getUserInfo from "@/api/users/userInfo";
import updateInfo from "@/components/updateInfo";
import updatePassword from "@/components/updatePassword";
import myReminders from "@/components/myReminders";

export default {
  components: {
    updateInfo,
    updatePassword,
    myReminders
  },
  data() {
    return {
      passwordModelShow: false,   // 是否显示修改密码对话框
      reminderShow: false,        // 是否显示我的提醒侧边栏
      infoModelShow: false,       // 是否显示修改信息对话框
      collapsed: false,
      currentPage: ["1"],
      organization: "",
      userInfo: {},
      pathMap: {
        "/student/courseSearch": ["1"],
        "/student/courseSelect": ["2"],
        "/student/scoreQuery": ["3"]
      }
    }
  },
  methods: {
    dealSetData(res, para) {
      if (res.result) {
        this.$set(this, para, res.data);
      } else {
        this.$message.error(res.msg);
      }
    },
    dealShowData(res, info) {
      if (res.result) {
        this.$message.success(info);
      } else {
        this.$message.error(res.msg);
      }
    },
    loadUserInfo() {
      // 加载用户信息
      getUserInfo().then(res => {
        this.dealSetData(res, "userInfo");
      });
    },
  },
  mounted() {
    //进行获取用户信息的请求，将获取的信息存入数据项中
    this.loadUserInfo();
    // 通过当前路由判断menu的值
    this.currentPage = this.pathMap[this.$route.path];
    this.organization = app.organization;
  }
};
</script>

<style scoped>
#components-layout-demo-custom-trigger {
  height: 100%;
  /* position: relative; */
}

.trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  margin: 16px;
  color: #fff;
}

.footer {
  /* position: absolute; */
  /* bottom: 20px; */
  margin-top: 20px;
  color: rgba(0, 0, 0, .45);
  font-size: 14px;
  position: relative;
  width: 100%;
  text-align: center;
  margin-bottom: 20px;
}


.v-logo {
  color: #fff;
}

.admin {
  float: right;
  margin-right: 50px;
  font-size: large;
}

.exit {
  cursor: pointer;
  color: #1890ff;
  font-size: large;
}


</style>